<template>
  <div class="game-card">
    <!-- 图片部分 -->
     <div class="game-card-img-container">
       <div class="game-card-img-up">
        <img src="/image.png" alt="">
      </div>
      <div class="game-card-img-down">
        <div class="game-card-img-item">
          <img src='/gameOne.png' alt="">
          <span class="game-card-img-item-text">坎特伯雷</span> 
        </div> 
        <div class="game-card-img-item">
          <img src='/gameTwo.png' alt="">
          <span class="game-card-img-item-text">碧蓝航线</span> 
        </div> 
        <div class="game-card-img-item">
          <img src='/gameThree.png' alt="">
          <span class="game-card-img-item-text">三国：天下谋定</span> 
        </div> 
      </div> 
      </div>
  
    <!-- 文字部分 -->
    <div class="game-card-text-container">
      <div class="game-right-title">新游预告</div>
      <div class="game-right-list">
        <a>嘟嘟脸恶作剧</a>
        <a>汇敬</a>
        <a>伊莫</a>
        <a>星痕共鸣</a>
        <a>代号砰砰</a>
        <a>异环</a>
      </div>
    </div>
  </div>

</template>

<script setup>

</script>

<style scoped>
.game-card{
  width: 95%;
  height: 90%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.game-card-img-container{
  width: 65%;
  height: 100%;
  /* border:1px solid red; */
}
.game-card-img-up{
  width: 230px;
  height: 129px;
  overflow: hidden;
  border-radius: 8px;
  /* border:1px solid red; */
}
.game-card-img-up img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  /* border:1px solid red; */
}
.game-card-img-up img{
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.game-card-img-down{
  margin-top: 16px;
  height: 108px;
  width: 229px;
  display: flex;
  justify-content: space-between;

}
.game-card-img-item{
  height: 108px;
  width: 66px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-items: center;
  align-content: space-between; */
  border-radius: 10px;
  
  /* border: 1px solid green; */
}

.game-card-img-item img{
  width: 66px;
  height: 66px;
  border-radius: 6px;
  object-fit: cover;
  overflow: hidden;
  /* border: 1px solid palevioletred; */
  
}
.game-card-img-item span{
  font-size: 13px;
  width: 66px;
  height: 34px;
  color: black;
  margin-top: 8px;
  text-overflow:clip;
  /* border: 1px solid red; */
}
.game-card-img-item span:hover{
  color: dodgerblue;
}
.game-card-text-container{
  width: 120px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap:15px;
  border-left: 1px solid #e3e5e7;
  /* border:1px solid purple; */
}
.game-right-title{
  font-size: 20px;
  line-height: 28px;
  margin: 0 0 5px 25px;
  border: 1px soild red;
  color: black;
  
}
.game-right-list{
  margin-left: 23px;
  display: flex;
  flex-direction: column;
  gap:15px;
}
.game-right-list a{
  list-style: none;
  font-size: 0.9em;;
  color: #666666;
  text-wrap: nowrap;
  overflow: hidden;
}









</style>
